<template>
  <div>
    <h1>当前鼠标的位置</h1>
    <p>x:{{ xy.x }}</p>
    <p>y:{{ xy.y }} </p>

    <hr />
    <p>当前点击次数:{{ num }}</p>
    <button @click="add">点击+1</button>
  </div>
</template>

<script>
import { reactive, ref, onMounted, onUnmounted } from 'vue'

const useCount = () => {
  // 1. 定义数据
  const num = ref(0)

  // 2. 定义逻辑
  const add = () => num.value++

  return {
    num, add
  }
}

const useMouse = () => {
  // 1. 定义数据(使用reactive定义响应式)
  const xy = reactive({
    x: 0,
    y: 0
  })

  // 2. 定义方法
  const move = (e) => {
    console.log(xy)
    xy.x = e.pageX
    xy.y = e.pageY
  }

  onMounted(() => {
    window.addEventListener('mousemove', move)
  })
  onUnmounted(() => {
    window.removeEventListener('mousemove', move)
  })

  return xy
}
export default {
  setup() {
    // 使用mouse Hook
    const xy = useMouse()
    const { num, add } = useCount()
    return {
      xy, num, add
    }
  }
}
</script>